import React, { Component } from  'react';
import { Tabs, Input, Dropdown, Tree } from 'antd';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import CustomDatePicker from '../../components/CustomDatePicker/index.jsx';
import DndGame from './dndGames.jsx';
import LeftSider from './components/leftSider/index.jsx';

const TreeNode = Tree.TreeNode;
const Search = Input.Search;

import './index.less';

const TabPane = Tabs.TabPane;

class DndDemo extends Component {

  state = {
    dropdownBoxVisible: false
  }

  callback = (key) => {
    console.log(key);
  }

  handlerVisibleChange = visible => {
    console.log(visible);
    // if (!visible) {
    //   const { selectedDetail, index } = this.state;
    //   const { onBlurHandle } = this.props;

    //   // 当前树形结构中所有选中的叶子节点都添加了后缀-noChild,因此传递到外部需要剥离
    //   const selectedObj = selectedDetail[index].map(i => i.slice(0, -8));

    //   onBlurHandle(selectedObj);
    // }
    this.setState({
      dropdownBoxVisible: visible,
    });
  }

  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  }

  onChange = () => {
    
  }

  render() {
    const { dropdownBoxVisible } = this.state;
    const dropdownBox = (
      <div className="selectorContainer">
        <div className="tree-selector">
          <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
          <Tree
            showLine
            defaultExpandedKeys={['0-0-0']}
            onSelect={this.onSelect}
          >
            <TreeNode title="parent 1" key="0-0">
              <TreeNode title="parent 1-0" key="0-0-0">
                <TreeNode title="leaf" key="0-0-0-0" />
                <TreeNode title="leaf" key="0-0-0-1" />
                <TreeNode title="leaf" key="0-0-0-2" />
              </TreeNode>
              <TreeNode title="parent 1-1" key="0-0-1">
                <TreeNode title="leaf" key="0-0-1-0" />
              </TreeNode>
              <TreeNode title="parent 1-2" key="0-0-2">
                <TreeNode title="leaf" key="0-0-2-0" />
                <TreeNode title="leaf" key="0-0-2-1" />
              </TreeNode>
            </TreeNode>
          </Tree>
          <div className="tree-selector__content"></div>
        </div>
      </div>
    );

    return (
      <Tabs defaultActiveKey="1" onChange={this.callback}>
        <TabPane tab="DropDown" key="1">
          <Dropdown
            overlay={dropdownBox}
            trigger={['click']}
            visible={dropdownBoxVisible}
            onVisibleChange={this.handlerVisibleChange}
          >
            <Input/>
          </Dropdown>
        </TabPane>
        <TabPane tab="拖动游戏" key="2">
          <DndGame></DndGame>
        </TabPane>
        <TabPane tab="dnd拖动" key="3">
          <LeftSider></LeftSider>
        </TabPane>
      </Tabs>
    );
  }
}

export default DragDropContext(HTML5Backend)(DndDemo);
